<template>
  <div class="container">
    <div class="table-container">
      <div class="table-wrapper">
        <el-table :data="list" border stripe style="width: 100%; height: 70vh">
          <el-table-column
            v-for="(label, prop) in formPropMap"
            :key="prop"
            :prop="prop"
            :label="label"
          />
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-button
                type="danger"
                @click="handleWithdraw(scope.row.courseId)"
                >退课</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            v-model:current-page="params.page"
            v-model:page-size="params.size"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="showWithdrawDialog" width="30%" title="退课">
    <h2>确定要退掉该课吗？</h2>
    <template #footer>
      <div class="btn-group">
        <el-button @click="showWithdrawDialog = false">取消</el-button>
        <el-button type="danger" @click="withdraw">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { courseApi, enrollmentApi } from "@/api";
import { getUserId } from "@/auth"
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";

const formPropMap = {
  courseId: "课程号",
  courseName: "课程名",
  credit: "学分",
  hours: "学时",
  courseType: "课程类型"
  // description: "描述"
};

type CourseSelectionForm = {
  courseId: string;
  courseName: string;
  credit: string;
  hours: string;
  courseType: string;
};

// 分页相关
interface PageParams {
  page: number;
  size: number;
}

// 表格
const list = ref<CourseSelectionForm[]>([]);
// 数据总数
const total = ref(0);
// 分页请求参数
const params = ref<PageParams>({
  page: 1,
  size: 10
});

const showWithdrawDialog = ref(false);

// 退课学生id，也就是当前系统的用户
const withdrawStudentId = ref(getUserId());

const defaultIdValue = "";
// 退课学生id
// 需要退课的课程id
const withdrawCourseId = ref(defaultIdValue);

/**
 * 退课初步处理
 * @param id 退课课程id
 */
const handleWithdraw = (id: string) => {
  showWithdrawDialog.value = true;
  withdrawCourseId.value = id;
};

/**
 * 退课
 */
const withdraw = async () => {
  try {
    await enrollmentApi.drop(withdrawStudentId.value as string, withdrawCourseId.value);
    ElMessage.success("退课成功");
  } catch (error) {
    ElMessage.error("退课失败");
    console.error("退课失败：", error);
  } finally {
    // 关闭退课窗口
    showWithdrawDialog.value = false;
    // 恢复初始状态，防止误删
    withdrawStudentId.value = defaultIdValue;
    withdrawCourseId.value = defaultIdValue;
    getList();
  }
};

const getList = async () => {
  // TODO: 可以加一个学生角色才申请课程结果查询
  const { data } = await courseApi.getSelectedCoursesByStudentId(getUserId() as string);
  list.value = data;
};

/**
 * 处理每页大小变化
 * @param val 每页大小
 */
const handleSizeChange = (val: number) => {
  params.value.size = val;
  params.value.page = 1;
  getList();
};

/**
 * 处理页面切换
 * @param val 页号
 */
const handleCurrentChange = (val: number) => {
  params.value.page = val;
  getList();
};

onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.container {
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-shrink: 0;

  h2 {
    margin: 0;
    color: #303133;
  }
}

.table-container {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.table-wrapper {
  flex: 1;
  overflow-y: auto;
}

.pagination {
  flex-shrink: 0;
  background: white;
  padding: 10px 0;
}

.btn-group {
  display: flex;
  justify-content: space-between;
}
</style>
